import React, { Component } from 'react';
import {
    Image,
    View,
    Dimensions,
    StyleSheet,
    Platform,
    ScrollView
} from 'react-native';
import STRING from '../../const_string_zh_CN';
import URL from '../../net/url.js';
import { NavigationActions } from 'react-navigation'
import { connect } from 'react-redux';
import interaction from '../../net/interaction.js';
import { Container, Thumbnail, Text, Button, Icon, Body, List, ListItem, Content, Spinner } from 'native-base';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
class question_teacher extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    //js组件的构造函数，js的生命周期
    constructor(props) {
        super(props);
        this.state = {
            content: null,
        };
    }
    render() {
        const { navigate } = this.props.navigation;
        let subjectTitle;
        if (this.props.navigation.state.params.type == 'course') {
            const { subject_course } = this.props;
            subjectTitle = subject_course.subjectTitle;
        }
        else {
            const { subject } = this.props;
            subjectTitle = subject.subjectTitle;
        }
        const { subject } = this.props;
        if (!this.state.content) {
            return this.renderLoadingView();
        }
        return (
            <Container>
                <ScrollView ref={(scrollView) => { _scrollView = scrollView; }}>
                    <View style={StyleSheet.flatten(styles.view)} >
                        <ListItem button  >
                            <Icon name='ios-paper-outline' />
                            <Body>
                                <Text style={StyleSheet.flatten(styles.text_style)}>{subjectTitle}</Text>
                            </Body>
                        </ListItem>
                        <List dataArray={this.state.content}
                            renderRow={(item) =>
                                <ListItem style={StyleSheet.flatten(styles.ListItem)}>
                                    <Text style={StyleSheet.flatten(styles.text_style)}>{item.optionTitle}:</Text>
                                    <Text style={StyleSheet.flatten(styles.text_style)}>{item.optionContent}</Text>
                                </ListItem>
                            } >
                        </List>
                    </View>
                    <Button block light style={StyleSheet.flatten(styles.button_default)} onPress={() => { this.props.navigation.state.params.type == 'course' ? navigate('AnswerQuestionStatisticsTeacher_Course', { title: this.props.navigation.state.params.title, type: 'course' }) : navigate('AnswerQuestionStatisticsTeacher', { title: this.props.navigation.state.params.title }) }}>
                        <Text style={{color:'#fff'}}>确定</Text>
                    </Button>
                </ScrollView>
            </Container>
        );
    }
    //加载等待的view
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    //rn的生命周期，初始化的时候会执行 SubjectOptionInfo
    async componentDidMount() {
        const { subject } = this.props;
        const { subject_course } = this.props;
        let subjectId;
        if (this.props.navigation.state.params.type == 'course') {
            console.log('课程-交互');
            subjectId = subject_course.subjectId;
            console.log('课程-交互' + subjectId);

        }
        else {
            console.log('发现-交互');
            subjectId = subject.subjectId;
            console.log('发现-交互' + subjectId);
        }
        let Interaction = new interaction();
        let SubjectOptionInfo = await Interaction.getSubjectOptionInfo(subjectId);
        this.setState({
            content: SubjectOptionInfo,
        });
    }

}
const styles = StyleSheet.create({
    button_default: {
        marginTop: 40,
        width: width / 4,
        height: 30,
        alignSelf: 'center',
        backgroundColor: '#F0AD4E',
    },
    Content: {
        marginTop: 15,
        // backgroundColor:'white',    
    },
    ListItem: {
        paddingLeft: 60,
        height: 40,

    },
    text_style: {
        //fontFamily:'微软雅黑',
        fontSize: 15,
        color: '#353535',
        marginLeft: 10
        // paddingLeft:15, style={{marginLeft:10}}
    },
    view: {
        marginTop: 15,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    marginLeft: {
        marginLeft: 10
    },
});
function mapStateToProps(state) {
    return {
        subject: state.intercation_question.subject,
        subject_course: state.intercation_question_course.subject_course
    }
}

function mapDispatchToProps(dispatch) {
    return {
    }
}

const QuestionTeacher = connect(
    mapStateToProps,
    mapDispatchToProps
)(question_teacher)

export default QuestionTeacher;
